<template>
  <!-- 导航栏 -->
  <NavBar :bgc="color"></NavBar>
  <!-- 介绍 -->
  <ProIndroduce @clickProIndroduce="handle1" @gotoFree="handle2"></ProIndroduce>
  <!-- 免费模板 -->
  <FreeModel ref="freeModel"></FreeModel>
  <!-- 自定义模板 -->
  <MyselfMake ref="myselfMake"></MyselfMake>
</template>
<script setup lang="ts">
import {
  reactive,
  toRefs,
  onBeforeMount,
  onBeforeUnmount,
  onMounted,
  ref,
} from 'vue'
import NavBar from '@/components/NavBar/NavBar.vue'
import ProIndroduce from '@/view/Home/components/ProIntroduce/ProIntroduce.vue'
import FreeModel from '@/view/Home/components/FreeModel/FreeModel.vue'
import MyselfMake from '@/view/Home/components/MyselfMake/MyselfMake.vue'
import _ from 'lodash'
let scrollTop = ref(0)
let color = ref('')
//滚动改变元素背景方法
function handleScroll() {
  scrollTop.value = document.documentElement.scrollTop
  if (scrollTop.value > 0) {
    color.value = '#ffffff'
    // console.log(color.value)
  }
  //滚轮往下滑动之后再滑回顶部，背景恢复白色
  if (scrollTop.value < 2) color.value = ''
}
//节流函数:单位时间内只执行一次
const lodashHandle = _.throttle(() => {
  handleScroll()
}, 300)
//监听页面滚动事件
onMounted(() => {
  window.addEventListener('scroll', lodashHandle)
})
// 离开当前组件别忘记移除事件监听
onBeforeUnmount(() => {
  window.removeEventListener('scroll', lodashHandle)
})

//介绍页面自定义事件:点击按钮，跳转到免费模板的位置
const freeModel = ref(null)
function handle1() {
  //element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内
  freeModel.value.$el.scrollIntoView({ behavior: 'smooth' })
}
//点击按钮，跳转到自定义模板的位置
const myselfMake = ref(null)
function handle2() {
  //element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内
  myselfMake.value.$el.scrollIntoView({ behavior: 'smooth' })
}
</script>
<style lang="scss" scoped></style>
